<template>
  <!--客户满意度-->
  <div>
    <p class="align">客户满意度</p>
    <div class="tea1">
      <p>(1) 学生及家长满意度</p>
      <div class="red">
        <p class="buy">满意：<input type="text" v-model="satisfied"/>次</p>
        <p class="buy">学生成绩进步满意度：<input type="text" v-model="praise"/>%</p>
        <p class="buy">一对一续费（续费率）：<input type="text" v-model="renewal"/>%</p>
        <p class="buy">班课续费（续班率）：<input type="text" v-model="renewals"/>%</p>
      </div>
      <div class="jifen">
        <button @click="btn">提交修改</button>
      </div>
    </div>
    <section class="wmassageMask" v-show="writeMessageShow">
      <div class="tk">
        <p>成功</p>
        <p class="border"></p>
        <button @click="qd">确定</button>
      </div>
    </section>
  </div>
</template>
<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      satisfied:'',
      praise:'',
      renewal:'',
      renewals:'',
      writeMessageShow: false
    };
  },
  methods: {
    btn() {
      console.log(11);
      let that = this;
      axios
        .post("/system/satisfied", {
          teaid:localStorage.getItem("ids"),
          satisfied:that.satisfied,
          praise: that.praise,
          renewal: that.renewal,
          renewals: that.renewals,
        })
        .then(function (res) {
          console.log(res);
          that.writeMessageShow = true
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    qd(){
      this.writeMessageShow = !this.writeMessageShow
    }
  },
  created() {
    let that = this;
    axios
      .get(
        "/system/customer",
         {id:localStorage.getItem("ids")}
      )
      .then(function (res) {
        console.log(res.data.data);
        that.satisfied = res.data.data.satisfied;
        that.praise = res.data.data.praise;
        that.renewal = res.data.data.renewal;
        that.renewals = res.data.data.renewals;
      })
      .catch(function (err) {
        console.log(err);
      });
  },
};
</script>
<style lang="css" scoped>
.teach{position: relative;}
.wmassageMask{position: fixed;top: 0;bottom: 0;left: 0;width: 100%;background-color: rgba(0,0,0,.3);z-index: 101;}
.tk{width: 80%;margin: 10% 0;background-color: #ccc;position: absolute;top:12rem;left:10%;background-color: #fff;border-radius: 10px;}
.tk button{color: #278ED4;width: 100%;padding: 1rem;border: 0;background-color: #fff;border-radius: 10px;margin-bottom:0;}
.tk p{width: 100%;padding: 2rem 0;text-align: center;}
.tk p.border{border-top:1px solid #ccc;padding:0;width:100%;height: 1px;}
.align {
  width: 100%;
  text-align: center;
  color: #f00;
   font-size: 1rem;
  line-height: 2rem;
}
.tea1,
.red {
  width: 90%;
  margin: 0 auto;
  font-size: 15px;
}
.red p {
  line-height: 1.9rem;
}
select {
  width: 50px;
  text-align: center;
  outline: none;
  border: none;
  color: #d62c32;
  border-bottom: 2px solid #d62c32;
  margin-bottom: 5px;
}
.buy {
  display: flex;
  justify-content: flex-start;
}
button {
  width:60%;
  line-height: 2rem;
  border-radius: 15px;
  background: #d62c32;
  border: 1px solid #d62c32;
  color: #f7ecec;
  margin-bottom: 2rem;
  outline: none;
}
.jifen {
  width: 80%;
  margin:20px auto;
  display: flex;
  justify-content: space-evenly;
}
.jifen p {
  margin-top: 15px;
  color: #a4a4a4;
  font-size: 12px;
}
.all > input {
  opacity: 0;
  position: absolute;
  width: 2em;
  height: 2em;
  margin: 0;
}
.all > input:nth-of-type(1),
.all > span:nth-of-type(1) {
  display: none;
}
.all > span {
  font-size: 2em;
  color: gold;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.all > input:checked ~ span {
  color: #666;
}
.all > input:checked + span {
  color: gold;
}
input {
  margin: 5px 4px;
  width: 40px;
  border:0;
  border-bottom:1px solid #000;
  outline: none;
}
.ra{
  margin:10px 4px;
  width: 15px
}
.r{margin: 5px 0;}
</style>
